<template>

  <div class="list-box" :style='{top:topValue,position:position,left:left}' >
      <!-- this.domIndex = index -->
      
      <div class="ear"></div>
      <div class="list-content">
          <div class="item sortable" @click=checked(index) :class="{on: index === domIndex}" 
                    v-for="(item, index) in navData">
              <a>{{item}}</a>
          </div>
      <div class="item sortable"  @click="goTop()"><a href="#">👆</a></div>
      
      </div>
  </div>
</template>

<script>
import {selfScrollTo} from '../../utils/utils'
export default {
    data(){
        return{
           position:'relative',
           left:1375+'px',
           topValue:-752+'px',
           index:0,      //按钮的索引
           domIndex:null,   //目前高亮被选中的
           navData:['推广','知识','直播','动画','番剧','国创','漫画','音乐','舞蹈','游戏','课堂','科技','运动','鬼畜','时尚','资讯','娱乐','专栏','电影','TV剧','影视'],
           color:"#505050"
        }
    },
    methods:{
        checked(index){
            this.domIndex = index;
            let allDoms=document.querySelectorAll('.cons');
            selfScrollTo(allDoms[index].offsetTop);
        },
        goTop(){

        selfScrollTo(0);

        }
       
    },
    mounted(){
        
        let conDoms=document.querySelectorAll('.cons');      
        window.addEventListener('scroll', () => {
             let scrollTop=(document.documentElement.scrollTop||document.body.scrollTop);
             //console.log(scrollTop);//滚动条滚动的距离
            //  设置滚动条导航的效果
                if(scrollTop>345){
                    this.topValue= 10+'px';
                    this.position='fixed';
                    }else{
                       this.position='relative';
                       this.topValue=-752+'px'; 
                    }
                 
             
            if(conDoms[this.index].offsetTop-200<scrollTop&&scrollTop<conDoms[this.index+1].offsetTop-30){
                 // console.log("进入推广");
                  this.domIndex=0;      

            }else if(scrollTop>conDoms[this.index+1].offsetTop-30){
              // console.log("进入知识");        
                 this.domIndex=1;
                
    
            }else{
                this.domIndex=null;
            }

         });

}

    }

</script>
<style lang="less" scoped src="./index.less">

</style>
<style scoped>
.active{
    background-color: aqua;
}
</style>

